<script setup lang="ts">
/**
 * 菜单权限管理模态框组件
 * @module MenuAuthModal
 * @desc 用于角色菜单权限的分配管理
 * @author YourName
 * @date 2025-04-23
 */

import { computed, shallowRef, watch } from 'vue';
import { $t } from '@/locales';
import { fetchGetAllPages, fetchGetMenuTree, } from '@/service/api';


// 组件配置
defineOptions({ name: 'MenuAuthModal' });

// 类型定义
interface Props {
  /** 角色ID（通过props传入） */
  roleId: number;
}

// 组件props定义（基于TS的类型声明）
const props = defineProps<Props>();

// 模态框显示控制（使用v-model双向绑定）
const visible = defineModel<boolean>('visible', {
  default: false
});

// 关闭模态框方法
function closeModal() {
  visible.value = false;
}

// 计算国际化标题
const title = computed(() => $t('common.edit') + $t('page.manage.role.menuAuth'));

// 响应式数据定义（使用shallowRef优化性能）
const home = shallowRef(''); // 首页路径
const pages = shallowRef<string[]>([]); // 所有页面路径列表
const tree = shallowRef<Api.SystemManage.MenuTree[]>([]); // 菜单树数据
const checks = shallowRef<number[]>([]); // 已选中的菜单ID集合

/** 
 * 获取首页配置
 * @function getHome
 * @desc 根据角色ID获取预设首页
 */
async function getHome() {
  // 示例请求逻辑（需对接实际接口）
  home.value = 'home';
}

/**
 * 获取所有页面路径
 * @function getPages
 * @desc 获取系统所有可用页面路径用于首页选择
 */
async function getPages() {
  const { error, data } = await fetchGetAllPages();
  if (!error) {
    pages.value = data;
  }
}

// 首页选择器选项计算
const pageSelectOptions = computed(() => {
  return pages.value.map(page => ({
    label: page,
    value: page
  }));
});

/**
 * 获取菜单树数据
 * @function getTree
 * @desc 获取完整的菜单树结构用于权限选择
 */
async function getTree() {
  const { error, data } = await fetchGetMenuTree();
  if (!error) {
    tree.value = data;
  }
}

/**
 * 获取已配置权限
 * @function getChecks
 * @desc 根据角色ID获取已授权的菜单ID列表
 */
async function getChecks() {
  // 示例数据（需对接实际接口）
  checks.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
}

/**
 * 树节点选择变化处理
 * @function checkChange
 * @param {number} val - 变化的节点ID
 */
function checkChange(val: number) {
  const idx = checks.value.indexOf(val);
  if (idx === -1) {
    checks.value.push(val);
  } else {
    checks.value.splice(idx, 1);
  }
}

/**
 * 提交权限配置
 * @function handleSubmit
 * @desc 提交已选中的菜单ID集合到后端保存
 */
function handleSubmit() {
  // 示例提交逻辑（需对接实际接口）
  window.$message?.success?.($t('common.modifySuccess'));
  closeModal();
}

/**
 * 初始化组件数据
 * @function init
 * @desc 模态框显示时触发的初始化操作
 */
function init() {
  getHome();
  getPages();
  getTree();
  getChecks();
}

// 监听模态框显示状态变化
watch(visible, val => {
  if (val) {
    init();
  }
});
</script>

<template>
  <!-- 权限配置对话框 -->
  <ElDialog v-model="visible" :title="title" preset="card" class="w-480px">
    <!-- 首页选择区域 -->
    <div class="flex-y-center gap-16px pb-12px">
      <div>{{ $t('page.manage.menu.home') }}</div>
      <ElSelect v-model="home" :options="pageSelectOptions" size="small" class="w-160px">
        <ElOption 
          v-for="{ value, label } in pageSelectOptions" 
          :key="value" 
          :value="value" 
          :label="label"
        />
      </ElSelect>
    </div>

    <!-- 树形权限选择器 -->
    <ElTree
      v-model:checked-keys="checks"
      :data="tree"
      node-key="id"
      show-checkbox
      class="h-280px"
      :default-checked-keys="checks"
      @check-change="checkChange"
    />

    <!-- 对话框底部操作按钮 -->
    <template #footer>
      <ElSpace class="w-full justify-end">
        <ElButton size="small" class="mt-16px" @click="closeModal">
          {{ $t('common.cancel') }}
        </ElButton>
        <ElButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
          {{ $t('common.confirm') }}
        </ElButton>
      </ElSpace>
    </template>
  </ElDialog>
</template>

<style scoped>
/* 自定义样式区域 */
</style>